<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--
            {{}}  插值表达式 有闪动缺点 可以做简单计算行为 可以将数据展示在其中
            但是不能使用逻辑行为，如 if for 等。
            vue语法 浏览器是无法识别的，vue会进行编译解析后，生成html格式，渲染在浏览器中
        -->
        <div>{{msg}}</div>
        <div>{{'5' + '2' + '0'}}</div>
        <div>{{500 + 20}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        //标准的vue写法，固定格式
        var vm = new Vue({
            // el 表示需要挂载的地方标签 
            el: '#app',
            // data 数据模型 用于存放数据
            data: {
                msg: '你好，世界'
            }
        })

    </script>
</body>

</html>